
import React,{PureComponent} from "react";
import './index.less';
import {Steps, Button, message, Alert, Spin} from 'antd';
import Step1 from './step1'
import Step2 from './step2'
import Step3 from './step3'
const Step = Steps.Step;


export default class extends PureComponent{
    constructor(props){
        super(props)
        this.state = {
            current: 0,
            data:{
                id:'8',
                step1:{}
            },
            loading:false
        };
    }
    componentDidMount() {
        this.props.setTitle('新增预售')
        const {pid,id,view} = this.props.location.query;
        if(view){
            this.toView(Number(view))
            return;
        }
        if(pid&&id){
            this.toView(2)
            return;
        }
        if(id&&!pid){
            this.toView(0)
            return;
        }

    }
    toView=(n)=>{
        this.setState({ current:n });
    }
    setData=(id,name)=>{
        this.props.router.replace(
            {
                pathname:'/app/home/add',
                query:{
                    id:id
                }
            }
        );
        this.setState({
            data:{
                id:id,
                name:name
            }
        })
        const current = this.state.current + 1;
        this.setState({ current });
    }
    loading=(isLoading)=>{
      this.setState({
          loading:isLoading
      })
    }
    render() {
        const {current,data,loading} = this.state;
        const steps = [{
            title: '预售策略设置',
            content: (<Step1 {...this.props} setData={this.setData} toView={this.toView}></Step1>),
        }, {
            title: '预售商品设置',
            content: (<Step2  {...this.props}  toView={this.toView} data={data}></Step2>),
        }, {
            title: '经销预售库存设置',
            content: (<Step3  {...this.props} onLoading={this.loading} toView={this.toView}  data={data}></Step3>),
        }];
        return (
            <div className={'addWrap'}>
                {
                    loading&&  <div className={'loadingWrap'}>
                        <div className={'loading'} >
                            <Spin tip="Loading..." spinning={loading}>
                                <Alert
                                    message="Alert message title"
                                    description="Further details about the context of this alert."
                                    type="info"
                                />
                            </Spin>
                        </div>

                    </div>
                }

                <div className="add_content">

                    <div>
                        <div>
                            <Steps style={{maxWidth:800,margin:'0 auto'}} current={current}>
                                {steps.map(item => <Step key={item.title} title={item.title}/>)}
                            </Steps>
                            <div className="steps-content">{steps[current].content}</div>
                        </div>
                    </div>


                </div>
            </div>

        );
    }
}
